<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8">
	<title>VUE的入门案例</title>
	<!--不要忘记导入vue.js-->
	<script src="../js/vue.js"></script>
</head>
<body>
<!--//视图展示层-->
<div id="app" >
	标签绑定的数据模型中的数据<br/>
	获取模型中的数据{{name}}
	<p>
		{{sex}}
	</p>
	<br/>
	<button v-on:click="clickMe()">点我</button>
</div>
<!--超出 绑定标签范围 无法使用插值表达式-->
{{name}}
</body>

<script type="text/javascript">
	// js 数据模型层
	var vue = new Vue({
		//element的缩写 元素的意思
		//  代表当前是模型 要与 页面上的哪个视图进行绑定
		// 当前vue绑定了 id 为app的标签，
		// app标签中可以通过插值表达式使用vue中的数据
		el:"#app",
		//data  就代表 数据的含义
		data:{
			name:"石破天",
			age:18,
			sex:'male'
		},
		//vue中带的方法
		methods:{
			// 方法名字:function() 方法实现
			clickMe:function(){
				alert("你点我干哈！");
			}
		}
	});
</script>
</html>
